<ol class="breadcrumb">
    <li><a href="#">系统中心</a></li>
    <li><a href="/user/role/list">角色管理</a></li>
    <li>编辑角色</li>
</ol>
<div class="panel panel-default">
    <div class="panel-heading">
        <span class="icon-pencil icon-large"></span>
        <span class="panel-title">请填写角色信息</span>
    </div>
    <div class="panel-body">
        <form class="form-horizontal" action="/user/role/edit" name="form1" method="post">
            <input type="hidden" name="id" value="<%= role._id %>"/>
            <% role.permissions.forEach(function(value, index){ %>
            <input type="hidden" name="permissions" value="<%= value %>"/>
            <% }); %>
            <div class="form-group">
                <label class="control-label col-xs-2">角色名称</label>

                <div class="col-xs-9">
                    <input type="text" name="name" class="form-control" placeholder="请输入角色名称" value="<%= role.name %>">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-2">授权访问</label>

                <div class="col-xs-9">
                    <div id="tree"></div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-xs-2 col-xs-offset-2">
                    <input type="submit" class="form-control btn btn-success">
                </div>
            </div>

        </form>
    </div>
</div>
<link rel="stylesheet" href="/lib/bootstrap-treeview/dist/bootstrap-treeview.min.css"/>
<script type="text/javascript" src="/lib/bootstrap-treeview/dist/bootstrap-treeview.min.js"></script>
<script type="text/javascript">


    $(function () {

        var permissions = (function () {
            var ps = {};
            $.each([<%-role.permissions%>], function (i, p) {
                ps[p] = p;
            });
            return ps;
        })();

        $.get('/user/permission/tree', function (res) {
            if (res.success) {
                initTree(res.data);
            }
        });

        function initTree(root) {

            function check(node) {
                if (node.nodes) {
                    $.each(node.nodes, function (key, obj) {
                        check(obj);
                    });
                    node.selectable = false;
                } else {
                    $.extend(node, {
                        icon: "glyphicon glyphicon-unchecked",
                        selectedIcon: "glyphicon glyphicon-check",
                        selectable: true,
                    });
                    //没有子级权限才可以被选中
                    if (permissions[node._id]) {
                        $.extend(node, {
                            state: {
                                selected: true
                            }
                        });
                    }
                }
                return node._id;
            }

            //判断权限是否存在
            function isExists(nodeId) {
                return $('input[value="' + nodeId + '"]').length > 0
            }


            $.when(check(root)).done(function () {

                //初始化树
                var $checkableTree = $('#tree').treeview({
                    data: [root],
                    levels: 4,
                    multiSelect: true,
                    collapseIcon: 'glyphicon glyphicon-collapse-up',
                    expandIcon: 'glyphicon glyphicon-collapse-down',
                    onNodeSelected: function (event, node) {
                        //添加当前权限和父权限
                        parents(node);

                        //选取父类权限
                        function parents(node) {
                            if (node) {
                                //如果权限未检测到则新增
                                if (!isExists(node._id)) {
                                    //添加权限
                                    append(node._id);
                                }
                                //添加父级权限
                                if (node.parentId)
                                    parents($('#tree').treeview('getNode', node.parentId));
                            } else {
                                return;
                            }
                        }

                        //增加权限
                        function append(nodeId) {
                            $('form[name="form1"]').append('<input type="hidden" name="permissions" value="' + nodeId + '"/>');
                        }
                    },
                    onNodeUnselected: function (event, node) {
                        //删除当前权限及相关权限
                        parents(node);

                        //如果有父级权限需要判断同级权限
                        function parents(node) {

                            //如果没有子权限被选
                            if (!childrenIsExists(node)) {
                                //删除权限
                                remove(node._id);
                            }
                            //如果有父级则继续检查父级是否删除
                            if (node.parentId)
                                parents($('#tree').treeview('getNode', node.parentId));
                        }


                        //删除权限
                        function remove(nodeId) {
                            $('input[value="' + nodeId + '"]').remove();
                        }

                        //判断子级权限是否存在
                        function childrenIsExists(node) {
                            var exists = false;
                            if (node.nodes) {
                                $.each(node.nodes, function (index, node) {
                                    if (isExists(node._id)) {
                                        exists = true;
                                        return false;
                                    }
                                });
                            }
                            return exists;
                        }
                    }
                });
            });
        }
    });

</script>